import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

type IoniconName = keyof typeof Ionicons.glyphMap;

const palette = {
  active: '#ff6a9b',
  inactive: '#9c8aa0',
  background: '#fff7fb',
  border: 'rgba(214, 106, 138, 0.18)',
};

function TabIcon({ name, color, size }: { name: IoniconName; color: string; size: number }) {
  return <Ionicons name={name} size={size} color={color} />;
}

export default function MerchantLayout() {
  return (
    <Tabs
      initialRouteName="overview"
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: palette.active,
        tabBarInactiveTintColor: palette.inactive,
        tabBarStyle: {
          backgroundColor: palette.background,
          borderTopColor: palette.border,
          height: 62,
          paddingBottom: 8,
          paddingTop: 8,
        },
        tabBarLabelStyle: {
          fontSize: 12,
          fontWeight: '600',
        },
      }}
    >
      <Tabs.Screen
        name="overview"
        options={{
          title: '经营概览',
          tabBarIcon: ({ color, size }) => (
            <TabIcon name="analytics-outline" color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name="products"
        options={{
          title: '商品管理',
          tabBarIcon: ({ color, size }) => (
            <TabIcon name="albums-outline" color={color} size={size} />
          ),
        }}
      />
      {/**
       * Hide nested product stack from the Tab bar.
       * Expo Router auto-adds undeclared child routes of this segment as tabs.
       * Declaring it here with href: null prevents a third "product" tab.
       */}
      <Tabs.Screen name="product" options={{ href: null }} />
    </Tabs>
  );
}
